<template>
  <el-dialog
    v-model="dialogVisible"
    title="网站跟踪代码"
    width="700px"
    @close="handleClose"
  >
    <el-alert
      message="将以下代码添加到您网站的 &lt;head&gt; 标签内："
      type="info"
      :closable="false"
      style="margin-bottom: 16px"
    />
    
    <div class="code-block">
      <pre><code>{{ embedCode }}</code></pre>
      <el-button
        type="primary"
        :icon="DocumentCopy"
        size="small"
        @click="handleCopy"
        style="margin-top: 8px"
      >
        复制代码
      </el-button>
    </div>
    
    <el-divider />
    
    <h4>配置选项</h4>
    <p>您可以通过以下属性自定义跟踪脚本的行为：</p>
    <ul>
      <li>
        <el-text code>data-api-url="https://your-api-server.com"</el-text> - 
        <span style="margin-left: 8px">指定API服务器地址（默认为脚本所在服务器）</span>
      </li>
      <li>
        <el-text code>data-debug="true"</el-text> - 
        <span style="margin-left: 8px">启用调试模式，在控制台输出日志</span>
      </li>
    </ul>
    
    <div class="example-block" style="margin-top: 16px">
      <p><strong>示例（自定义API服务器）：</strong></p>
      <div class="code-block">
        <pre><code>{{ customApiExample }}</code></pre>
      </div>
    </div>
    
    <el-divider />
    
    <h4>使用说明</h4>
    <ul>
      <li>基本跟踪代码会自动收集页面访问、来源、浏览器和设备信息</li>
      <li>对于单页应用(SPA)，代码会自动跟踪路由变化</li>
      <li>要跟踪自定义事件，请使用 <el-text code>DevOpsBITracker.trackEvent()</el-text> 方法</li>
    </ul>
    
    <div class="example-block" style="margin-top: 16px">
      <p><strong>事件跟踪示例：</strong></p>
      <div class="code-block">
        <pre><code>DevOpsBITracker.trackEvent('按钮', '点击', '注册按钮');</code></pre>
      </div>
      
      <p style="margin-top: 16px"><strong>自定义数据示例：</strong></p>
      <div class="code-block">
        <pre><code>DevOpsBITracker.trackCustomData({ userId: '123', userType: 'premium' });</code></pre>
      </div>
    </div>
    
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" :icon="DocumentCopy" @click="handleCopy">
        复制代码
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { DocumentCopy } from '@element-plus/icons-vue'

interface Props {
  visible: boolean
  embedCode: string
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:visible': [value: boolean]
  copy: []
}>()

const dialogVisible = ref(props.visible)

watch(() => props.visible, (newVal) => {
  dialogVisible.value = newVal
})

watch(dialogVisible, (newVal) => {
  emit('update:visible', newVal)
})

const customApiExample = computed(() => {
  if (!props.embedCode) return ''
  // 使用字符串拼接避免Vue解析script标签
  const scriptTag = 'script'
  const scriptEndTag = '</' + scriptTag + '>'
  // 构造正则表达式模式字符串
  const patternStr = '>\\s*<' + '/' + scriptTag + '>'
  const regex = new RegExp(patternStr, 'gi')
  return props.embedCode.replace(regex, ` data-api-url="https://api.example.com">${scriptEndTag}`)
})

const handleClose = () => {
  dialogVisible.value = false
}

const handleCopy = () => {
  navigator.clipboard.writeText(props.embedCode)
    .then(() => {
      ElMessage.success('代码已复制到剪贴板')
      emit('copy')
    })
    .catch(() => {
      ElMessage.error('复制失败，请手动复制')
    })
}
</script>

<style scoped lang="scss">
.code-block {
  background-color: #f5f5f5;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  border: 1px solid #e0e0e0;
  
  pre {
    margin: 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}

.example-block {
  background-color: #fafafa;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  
  ul {
    margin: 8px 0;
    padding-left: 20px;
    
    li {
      margin: 4px 0;
    }
  }
  
  h4 {
    margin-top: 0;
  }
  
  p {
    margin: 8px 0;
  }
}
</style>

